---
// import LogoWall from '@/components/LogoWall/LogoWall.astro'
// import Match from '@/components/Match.astro'
import DocsLayout from '@/layouts/Docs.astro'
import type { MDXLayoutProps } from 'astro'
import Hero from './_Hero'
import Link from '@/components/Link.astro'
import { FRAMEWORKS, getFramework } from '@/lib/framework'

type Props = MDXLayoutProps<{}>

const { sandbox, pkgName, componentType } = FRAMEWORKS[getFramework(Astro.params)!]
---

<DocsLayout
	title={`${pkgName} - An animated number component`}
	description={`A ${componentType} to animate numbers. Dependency-free. Accessible. Customizable.`}
>
	<Hero transition:persist="home-hero" client:load {sandbox} slot="hero" />
	<!-- <Match react slot="hero">
		<LogoWall />
	</Match> -->
	<slot />
	<footer
		slot="footer"
		class="prose prose-muted dark:prose-invert border-faint mt-16 border-t pt-16"
	>
		<p>
			Built by <Link href="https://x.com/mbarvian">Max Barvian</Link>. Heavily inspired by the
			<Link href="https://family.co">Family</Link> app. <Link
				href="https://expensive.toys/blog/blur-vignette"><code>mask-image</code> technique</Link
			> by <Link href="https://x.com/artur_bien">Artur Bień</Link>. <Link
				href="https://buildui.com/recipes/animated-counter">Digit looping technique</Link
			> by <Link href="https://x.com/samselikoff">Sam Selikoff</Link>.
		</p>
	</footer>
</DocsLayout>
